<!--
此页面用于学习浏览器展示base64编码的图片。
学习内容：
1、经base64编码后的图片字符串可显示为图片
2、base64编码图片浏览器支持情况

已验证：
可对base64编码的图片进行显示。
IE：可显示图片
FireFox:可显示图片
Chrome：可显示图片
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../../js/jquery-1.6.2.js"></script>
    <script type="text/javascript">
        function showImg(){


            var imgStr = "iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAIvElEQVR42u3dUY6jSBBAQd//0rtnGKntzJcVT5o/y26gKhiJAj7/SVKkj10gCViSBCxJwJIkYEkSsCQBS5KAJUnAkgQsSQKWJAFLErAkCViSBCxJwJIkYEkSsCQBS5KAJUnAkgQsSQKWJAFLErAkCViSNAHW5/NJ/Jvarn/9/qnj8ld/Z2X/fHt7X5svwAIWsIAFLGABC1jAAhawgAUsYAELWMACFrCABSxgAQtYv9/gb/w9UxOssj/rMFWAe2H+AgtYwAIWsIAFLGABC1jAAhawgAUsYAELWMACFrCABawXwKpMgKt/z7bjuA36q/sZWMACFrDMF2ABC1jAAhawgAUsYAELWMACFrCABSxgAQtYwNpwwKZuft4Gd+Xm9qnxBixgAQtYwAIWsIAFLGABC1jAAhawgAUsYAELWMACFrCABazNYNXhqy87+Pb2Vh45DSxgAQtYwAIWsIAFLGABC1jAAhawgAUsYAELWMACFrCAtROs+gSeAn0b0L5/5/4vzl9gAQsowAIWsIAFLGABC1jAAhawgAUsYAELWMAClu8H1iWwtv27CorP3/h8Zb4AC1g+7/PAApYJ4/PAAhawfN7ngQUsYPk8sIAFLBPG54EFLBUvP9dv1tXBsW0XAAtYApaABSwBS8ACFrAELGAJWAIWsBQEa2ogVl7AWb9cXb/Mv+13K/MLWMACFrCABSxgAQtYwAIWsIAFLGABC1jAAhawgAUsYAHrBnxXJ/bUfnjtxaL1E/Bm4IAFLGABC1jAAhawgAUsYAELWMACFrCABSxgAQtYwALWC2Btg2Pb9lZAqS8fuXpiS/5nBVjAAhawgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGAFwXptAFW+Z9vxeu3zU8exCB+wgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGABC1jAKoL17QNZOTBXJ/wUiHWY6tsLLGABC1jAAhawgAUsYAELWMACFrCABSxgAQtYwAIWsIA1O3ArA7QOouUOrZvJLz0sAFjAAhawgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGAVwbr6SN+rj9at3Oy9bWJPjdsXAhawgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGABC1iXwJqakPUBd/UyduV3r54gty3TARawgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGABC1h1sL49sCqPjq1cbt92HOv7Z9tyhOLyCGABC1jAAhawgAUsYAELWMACFrCABSxgAQtYwAIWsIBVBKuyg167GXhqP2zb//VlK5XtAhawgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGABC1jA2vliyMqLQiuPDK7c3Fs58Ux9P7CABSxgAQtYwAIWsIAFLGABC1jAAhawgAUsYAELWMAC1uyyhm2XmbdNpG3H67XfrdxMXtkuYAELWMACFrCA5XeBBSxgAQtYwAIWsIAFLGABC1jAAlYdrG/v6NdeMFn/e7adAOonmMqJH1jAAhawgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGAB62936LbvmXokceWFslP7oXJTceXmdmABC1jAAhawgAUsYAELWMACFrCABSxgAQtYwAIWsIAFrN8c4G8f+Mp2Tf092yCrj5NtJ05gAQtYwAIWsIAFLGABC1jAAhawgAUsYAELWMACFrCABawbVQ7YtglfB67yu5UTJ7CABSxgAQtYwAIWsIAFLGABC1jAAhawgAUsYAELWMAC1uxAqTwK+eoyjm3AXXpR6AaANgMHLGABC1jAAhawgAUsYAELWMACFrCABSxgAQtYwAIWsC6BVZl49UctT8E3tZzCi11njyOwgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGABC1jAAlbr8m39haaVgX51Am8D99ILVoEFLGABC1jAAhawgAUsYAELWMACFrCABSxgAQtYwALWpWUNdWgqyyY8Kvo349AJG1jAAhawgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGAB65c7rnIzZ32A1pdrXAUUWMACFrCABSxgAQtYwAIWsIAFLGABC1jAAhawgAUsYAFrJ1ivLWu4+uLY124ar4//bVACC1jAAhawgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGDtfGHq1EC/ehl+23KEyotgKydCYAELWMACFrCABSxgAQtYwAIWsIAFLGABC1jAAhawgAWsnUBUJvDUhKz/7jbQ69B4kSqwgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGABC1jAaoFVeRRv/fun4Ks/SruyXcACFrCABSxgAQtYwAIWsIAFLGABC1jAAhawgAUsYAELWNq8LKOyfKH+SOXKiQFYAhawgAUsYAELWMACFrCABSxgCVjAAhawgAUsYAFrJ1he8NmaGPWbZo23/S9GBRawgGW8AcsAAhawgAUsAwhYxhuwgAUsYBlvwDKAgAUsYL0M1rYB/e3P129Onjq+9cv2V5ehAAtYwAIWsIAFLGABC1jAAhawgAUsYAELWMACFrCABSxgzQ64ygTbdnm7vryjcuKsLLNw8zOwgAUsYAELWMACFrCABSxgAQtYwAIWsIAFLGABC1jAAtYGmCrfs+3vnIJjW5duigYWsIAFLGABC1jAAhawgAUsYAELWMACFrCABSxgAQtYwNq/rOHb+62+vOO1CVx/NLObn4EFLGABC1jAAhawgAUsYAELWMACFrCABSxgAQtYwALWmwN324tL6/v/tRNeZRnN5vEDLGABC1jAAhawgAUsYAELWMACFrCABSxgAQtYwAIWsC6BdfVy79QArVzGru//17ZrxUkLWMACFrCABSxgAQtYwAIWsIAFLGABC1jAAhawgAUsYAXBkiRgSQKWJAFLkoAlCViSBCxJApYkYEkSsCQJWJKAJUnAkiRgSQKWJAFLkoAlCViSBCxJApYkYEkSsCQBS5KAJUnAkgQsSQKWJP1F/wPcjXhYI+BpPgAAAABJRU5ErkJggg==";
            $(document).ready(function(){
                $('img').attr("src" , "data:image/gif;base64," + imgStr);
            })
        }
    </script>
</head>
<body>
<input type="button" value="showImg" onclick="showImg()"/>
<img id="image" src=""/>
</body>
</html>